<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:msn="http://www.contact.messanger.com/contacts/msn/ui"
              xmlns:fn="http://java.sun.com/jsp/jstl/functions"
              xmlns:core="http://www.contact.core.com/contacts/core/ui"
        >
    <style type="text/css">
        table.noborder td {
            border: 0px;
        }
    </style>

    <h:form id="form_chatList">

        <rich:panel bodyClass="rich-laguna-panel-no-header" style="border:none; width:100%">

            <core:searchTable value="#{chatRequestBean.filterRoomList}"
                              label="#{resources.publicchatSearchLabel}"
                              reRender="#{rich:clientId('chatRoomsList')}"
                         />

        </rich:panel>


        <h:panelGroup layout="block" style="width:100%; overflow:auto;  border-bottom:1px solid #{a4jSkin.panelBorderColor};">
            <rich:dataTable id="chatRoomsList" value="#{chatSessionBean.publicChatRooms}"
                            var="chatRoom"
                            width="100%"
                            styleClass="noborder"
                            onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                            onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                    >
                <f:facet name="header">
                    <h:panelGroup style="text-align:left;">
                        <h:outputText value="#{resources.publicchatListLabel}"/>
                        <h:graphicImage url="/style/images/add.PNG"
                                        style="cursor:pointer;float:right;"
                                        styleClass="hidelink"
                                        onclick="Richfaces.showModalPanel('createRoomModalPanel');"/>

                    </h:panelGroup>
                </f:facet>

                <rich:column style="min-width:18px; cursor:pointer">
                    <h:graphicImage alt="[P]"
                                    url="/style/images/key.png"
                                    height="16"
                                    width="16"
                                    rendered="#{chatRoom.chatProtected}"
                            />
                </rich:column>
                <rich:column
                        filterExpression="#{fn:containsIgnoreCase(chatRoom.chatTopic,chatRequestBean.filterRoomList)}"
                        style="width:100%; cursor:pointer">
                    <h:outputText value="#{chatRoom.chatTopic}" style="font-weight:bold;"/>
                </rich:column>
                <rich:column style="cursor:pointer">
                    <h:outputText value=" (#{chatRoom.userCount})"/>
                </rich:column>

                <a4j:support reRender="chatTabs, form_chatList, form_chatUserList" event="onRowClick"
                             action="#{chatRequestBean.openRoom}"
                             oncomplete="if ( #{chatRoom.chatProtected} ) Richfaces.showModalPanel('protectedRoomModalPanel'); else selectedTab = 'room_#{chatRoom.uniqueKey}';">
                    <f:setPropertyActionListener value="#{chatRoom.uniqueKey}" target="#{chatRequestBean.roomKey}"/>
                </a4j:support>
            </rich:dataTable>
        </h:panelGroup>
    </h:form>

    <ui:include src="protectedChatRoom.xhtml"/>

    <ui:include src="createChatRoom.xhtml"/>

</ui:component>